<template>
  <div class="desc">      
      <nav-com/>
     
 
      <div class="main">
        <el-container>
            <el-main>
              <img src="@/assets/img/hireGoods/雅迪.jpg" alt="">
            </el-main>
            <el-aside  class="aside">
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>成为车主</span>                
                  </div>
                </template>            
              </el-card>
              <el-card class="box-card">
                <template #header>
                  <div class="card-header">
                    <span>立即租车</span>                
                  </div>
                </template>            
              </el-card>
              <el-card class="box-card1">
                <template #header>
                  <div class="card-header">
                    <div class="">                    
                        <span class="price">￥{{currentInfo.price}}</span>
                        <span class="price-normal">/天</span>                    
                    </div>   
                    <div class="bicyclename">
                        {{currentInfo.bicyclename}}
                    </div>             
                  </div>
                </template>    
                <el-button type="primary" round class="btn" @click="payment">立即下单</el-button>   
              </el-card>
            </el-aside>
            
          </el-container>

          <div class="comment">
            <h2>评论</h2>
                <el-input
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  v-model="textarea">
                </el-input>
                <el-button type='primary' class="submit">发表</el-button>
          </div>
      </div>
  </div>
</template>

<script>
import navCom from '@/components/Nav.vue'
export default {
  name:'descBicycle',
  components:{
    navCom
  },
  data() {
    return {
      currentInfo:{
        price:'',
        brand:'',
        platenumber:'',
        score:'',
        type:'',
        bicyclename:'',        
      },
      textarea:''
    }
  },
  created() {
    this.getCurrent()
    console.log(this.currentInfo);
    this.saveCurrentinfo()
  },
  methods: {
    getCurrent(){
      this.currentInfo.price = this.$route.params.price;
      this.currentInfo.brand = this.$route.params.brand;
      this.currentInfo.platenumber = this.$route.params.platenumber;
      this.currentInfo.score = this.$route.params.score;
      this.currentInfo.type = this.$route.params.type;
      this.currentInfo.bicyclename = this.$route.params.bicyclename;
    },
    payment(){
        this.$router.push('/pay')
    },
    saveCurrentinfo(){
      this.$store.commit('saveCurrent',this.currentInfo)
    }
  },
  
}
</script>

<style>
.desc {
  height: 1900px;
}
.main{
  border: 1px solid red;

  width: 1000px;
  margin: 30px auto;
}
.aside{
  border:1px solid red ;
  width: 500px;
  height: 480px;
  margin-right: 98px;
  margin-top: 20px;
}

.card-header {
  
  /* display: flex; */
  /* justify-content: space-between; */
  /* align-items: center; */
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 0px;
  margin-top: 10px;
}

.box-card {
  width: 280px;
  margin-bottom: 20px;
}

.price{
  font-size: 24px;
  color: red;
}

.price-normal{
  /* font-size: 16px; */
  color: red;
}
.bicyclename{
  margin-top: 20px;
  font-size: 24px;
}

.box-card1{
  position: sticky;
  top: 0;
  background-color: green;

  

}
.box-card1 .btn{
  width: 240px;
}


.comment .submit {
  float: right;
}
</style>